<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    垂直居中方式：
    
    已知高度和宽度的元素
    方案一：设置父元素为相对定位，
            给子元素设置绝对定位，
            top: 0; 
            right: 0; 
            bottom: 0; 
            left: 0; 
            margin: auto;
    
    方案二：设置父元素为相对定位，
            给子元素设置绝对定位，
            left: 50%; 
            top: 50%; 
            margin-left: --元素宽度的一半px; 
            margin-top: --元素高度的一半px;
            
    
    未知高度和宽度的元素
            1、设置父元素为相对定位，
               给子元素设置绝对定位，
               left: 50%; 
               top: 50%; 
               transform: translateX(-50%) 
                          translateY(-50%);
            
            2、设置父元素为flex定位，
               justify-content: center; 
               align-items: center;

    

</body>
</html>